<template>
    <div class="page-content">
        <!-- 没有侧边栏 -->
        <template v-if="isNoSideBar">
            <!-- 不需要头部通栏 -->
            <div class="container" v-if="!isFullWidth">
                <router-view />
            </div>
            <template v-else>
                <router-view />
            </template>
        </template>
        <div class="container" v-else>
            <div class="row">
                <div class="col-xl-3 col-lg-4 col-md-12 theiaStickySidebar">
                    <div class="box dash-profile">
                        <div class="settings-menu p-0">
                            <div class="profile-bg">
                                <h5>Beginner</h5>
                                <img src="../../assets/img/instructor-profile-bg.jpg" alt="">
                                <div class="profile-img">
                                    <a href="instructor-profile.html"><img src="../../assets/img/user/user15.jpg"
                                            alt=""></a>
                                </div>
                            </div>
                            <div class="profile-group">
                                <div class="profile-name text-center">
                                    <h4><a href="instructor-profile.html">{{ userInfo.data.user.name }}</a></h4>
                                    <p>教师</p>
                                </div>
                                <!-- <div class="go-dashboard text-center">
                                        <a href="add-course.html" class="btn btn-primary">开始上课</a>
                                    </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="box account-settings">
                        <div class="settings-menu">
                            <h3>仪表盘</h3>
                            <ul>
                                <li class="nav-item ">
                                    <router-link to="/teacher" exact-active-class="active" class="nav-link">
                                        <i class="feather-home"></i> 我的主页
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/teacher/course" exact-active-class="active" class="nav-link">
                                        <i class="feather-book"></i> 我的课程
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/teacher/paper" exact-active-class="active" class="nav-link">
                                        <i class="feather-server"></i> 我的试卷
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/teacher/student" exact-active-class="active" class="nav-link">
                                        <i class="feather-users"></i> 我的学生
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/teacher/class" exact-active-class="active" class="nav-link">
                                        <i class="feather-package"></i> 我的班级
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/teacher/record-teaching" exact-active-class="active"
                                        class="nav-link">
                                        <i class="feather-pie-chart"></i> 我的授课
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/teacher/record-exam" exact-active-class="active" class="nav-link">
                                        <i class="feather-layers"></i> 我的考试
                                    </router-link>
                                </li>
                            </ul>
                            <div class="instructor-title">
                                <h3>账号信息</h3>
                            </div>
                            <ul>

                                <li class="nav-item">
                                    <router-link to="/teacher/settings" exact-active-class="active" class="nav-link">
                                        <i class="feather-settings"></i> 编辑信息
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <router-link to="/teacher/security" exact-active-class="active" class="nav-link">
                                        <i class="feather-user"></i> 账号安全
                                    </router-link>
                                </li>
                                <li class="nav-item">
                                    <a href="instructor-social-profiles.html" class="nav-link">
                                        <i class="feather-power"></i> 退出登录
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9 col-lg-8 col-md-12">
                    <router-view />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import useUseInfo from '@/store/user'
// 1. 学生详情页 + 课程详情页 + 试卷详情 需要隐藏左侧边栏并有头部通栏的效果
// 2. 课程详情页              需要隐藏左侧边栏并没头部通栏的效果
// 3. 班级课程详情页          需要隐藏左侧边栏并没头部通栏的效果 class-course-detail?id=1
const isNoSideBar = computed(() => {
    const route = useRoute()
    return route.path.includes('-detail')
})

const isFullWidth = computed(() => {
    const route = useRoute()
    const p = route.path
    return p.includes('/student-detail') || p.includes('/course-detail') || p.includes('/lesson-detail') || p.includes('/paper-detail')
})

const userInfo = useUseInfo()

</script>
